<template>
<div class="bao">
    <div class="tou">
      <div :class="{act:conn == index}" class="qiang" v-for="(item,index) in arr1" :key="index" @click="fun(index)"> {{item}} </div>
    </div>
    <!-- 爆爆团列表开始 -->
   <div class="kuo" v-for="(item,index) in arr" :key="index">
    <div class="imgbox">
        <img :src=item.picture alt="">
    </div>
    <div class="xinxi">
        <h3 class="biao"> {{item.name}} </h3>
        <div class="xiabian">
            <div class="bao">
                <p>爆爆团价</p>
                <span class="jia">￥{{item.min_price}}</span>
                <div class="del">
                <p class="zhe">{{item.promotion_info}}</p>
                <p class="tuan"> {{item.unit}} </p>
                </div>
            </div>
            <div class="qiang">
                <div class="ma">马上抢</div>
                <div class="shou"> {{item.month_saled_content}} </div>
            </div>
        </div>
    </div>

</div>
  </div>
</template>

<script>
import {tuan_list} from '../utils/api'
export default {
    data(){
        return{
            conn:0,
            arr1:["正在抢购","上新预告"],
            arr:[{shan:50}],

        }
    },
    mounted(){
      tuan_list({status:0}).then((res)=>{
        console.log(res.data.list);  
        this.arr = res.data.list;     
      })
    },
    methods:{
        fun(index){
            this.conn = index;
        },
    },
}
</script>

<style lang="scss" scoped >
.tou{
    width: 200px;
    height: 35px;
    display: flex;
    background-color: rgb(221, 107, 107);
    font-size: 16px;
    color: #ffffff;
    margin: 30px 0px 15px 5px;
    line-height: 35px;
}
.tou .qiang{
    text-align: center;
    width: 100px;
    height: 35px;
}
.tou .act{
    font-size: 18px;
    font-weight: bold;
}
.kuo{
    display: flex;
    width: 93%;
    height: 190px;
    background-color: #f0f0f0;
    border-radius: 7px;
    margin: auto;
    margin-bottom: 10px;
}
 img{
    width: 140px;
    height: 140px;
    border-radius: 5px;
    padding: 5px;
    padding-top: 25px;
}
 .kuo .xinxi .xiabian{
    display: flex;
}
.kuo .xinxi p{
    margin: 8px 6px;
    color: #928d8d;
}
.bigbox .kuo .xinxi .xiabian .tuan{
    color: red;
    font-size: 14px;
    margin: 5px 3px;
}
.kuo .xinxi .xiabian .jia{
    color: red;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
}
.kuo .xinxi .xiabian .zhe{
    color: red;
    border: solid 1px red;
    font-size: 7px;
}
.kuo .xinxi .xiabian .del{
    color: #b6aaaa;
    margin-top: 10px;
}
 .kuo .xinxi .xiabian .qiang{
    margin-top: 20px;
    margin-left: 40px;
} 
 .kuo .xinxi .xiabian .qiang .ma{
    width: 80px;
    height: 40px;
    background-color: red;
    border-radius: 25px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    margin-bottom: 10px;
}
.kuo .xinxi .xiabian .qiang .shou{
    color: red;
    font-size: 12px;
    text-align: center;
}
</style>